<template>
    <div class="home-dec">
 
         <!--头部导航栏 -->
       <van-nav-bar
         title="趣味生活"
         left-text="返回"
         left-arrow
         @click-left="onClickLeft"
         fixed 
        />   

           <!-- 详细介绍的图片 -->
        <div class="text-dec">
            <img :src="images[index]" alt="">    
        </div>

        <!-- 点评部分 -->
        <div class="comment">
        <span>点评</span>
        <van-rate v-model="value" />
     </div>

     <van-divider :style="{borderColor: 'black'}" v-show="show">评论成功</van-divider>
     
<!-- 底部反馈部分 -->
   <div class="report">
   <p v-show="show"><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="30"/>  <span>{{message}}</span></p> 

     <!-- 底部弹出 -->
   <van-popup v-model="isReportshow" 
      round
      position="bottom" 
      :style="{ height: '40%' }">
      
  
      <van-field
         v-model="message"
         rows="2"
         autosize
         label="评论"
         type="textarea"
         maxlength="50"
         placeholder="请输入评论"
         show-word-limit
      />
     <div class="qr-btn" @click="report">
          确认
     </div>  

   </van-popup>
  <div class="report-conter"  v-show="search">
  <span @click="isReportshow = true">评论</span>
</div>

</div>


    </div>
</template>


<script>


import { Toast } from 'vant';
/*
 如果直接在模板上通过src="../../assets/img/p1.png"是没有问题的
想通过data里的引入路径 ，再：src绑定就不能直接把"../../assets/img/p1.png"放到data中，否则webpack打包无法解析
需要通过import引入再放到data中
*/ 
import  p1 from "../../assets/img/plany2.jpg"
import  p2 from "../../assets/img/p2.jpg"
import  p3 from "../../assets/img/p3.jpg"
import  p4 from "../../assets/img/p4.jpg"
import  p5 from "../../assets/img/p6.jpg"
import  p6 from "../../assets/img/p7.jpg"



     export default {
         data(){
            return {
            
                // 路由参过来的参数
                index: this.$route.params.num,
                images: [
                  p1,
                  p2,
                  p3,
                  p4,
                  p5,
                  p6,

                ],
                value: 1,
                show: false,
                search:true,
                // 底部弹出
                isReportshow:false,
                message: ''
             }

          },

         methods:{
        

            onClickLeft() {
                this.$router.replace('/')
                Toast('返回');

              
             },
            
             report() {
                if(this.message== '') {
                  Toast('不能发表空评论');
                   return
                }
                this.isReportshow = false
                this.show = true
             }


        
         },

         components: {
        
       }
     } 



</script>


<style lang="scss" scoped>

        .home-dec {
            position: absolute;
             top:0;
             width: 100%;
             height: 500vh;
             background: white;
             z-index: 999;
            
            

             .text-dec {
                width: 100%;
                height: 480px;
                padding: 5px;
                margin-top: 46px;
                background: white;
               
             }

             .report {
                p {
                  display: flex;
                  align-items: flex-end;
                  height: 50px;
                  padding-left: 10px;
                  line-height: 50px;
                

                   span {
                    height: 30px;
                    line-height: 30px;
                    margin-left: 10px;
                  
                   }
 
                }

                .report-conter {
                  display: flex;
                  position: fixed;
                  height: 90px;
                  margin-top: 30px;
                  // border:1px solid black;
                  #report-text {
                     
                  }

                  span {
                    display: inline-block;
                    width: 100vw;
                    height: 50px;
                    border-radius: 10px;
                    text-align:center;
                    line-height: 50px;
                    background:#eee;
                    margin-top: 38px;

                  }
                }

                .qr-btn {
                   position: absolute;
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    border-radius: 20px;
                    background: #eee;
                }
             }
          
        }
</style>